<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>夕阳红老汉信息有限公司</title>
    <link rel="shortcut icon" href="images/xi.ico"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/modalDetail.css"/>
</head>
<body>
    <!-- Jumbotron -->
    <header class="jumbotron">
        <p class="lead">用自动化构建工具增强你的工作流程！</p>
        <p><a class="btn btn-lg btn-default btn-getting-started" href="javascript:;" role="button">开始使用</a></p>
    </header>
    <div class="title-wrap">
        <div class="logo"></div>
        <div class="return"><a href="index.jsp">返回主页</a></div>
        
    </div>
    <div class="content">
        <div class="page_1">
            <h2>已选择的模板--<span id="chooseModal"></span>--<span id="times"></span></h2>
        </div>
        <div class="page_2">
            <div class="row">
                <div class="col-md-6">
                    <h2>岗位类别</h2>
                    <div class="input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon1">*</span>
                        <select class="form-control" id="type">
                            <option value="运营部">运营部</option>
                            <option value="运营部">运营部</option>
                            <option value="技术部">技术部</option>
                            <option value="管理部">管理部</option>
                            
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2>岗位名称</h2>
                    <div class="input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon2">*</span>
                        <input type="text" class="form-control" placeholder="岗位名称" aria-describedby="sizing-addon2" id="name"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2>工作地点</h2>
                    <div class="input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon3">*</span>
                        <select class="form-control" id="address">
                            <option value="上海">上海</option>
                            <option value="广东">广东</option>
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="重庆">重庆</option>
                            <option value="成都">成都</option>
                            <option value="厦门">厦门</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2>薪资待遇</h2>
                    <div class="input-group input-group-md">
                        <span class="input-group-addon">*</span>
                        <input type="text" class="form-control" placeholder="薪资待遇" aria-describedby="sizing-addon2" id="money"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" id="need">
                    <h2>岗位需求</h2>
                    <div class="row input-group input-group-md needrow">
                        <span class="input-group-addon">*</span>
                        <input type="text" class="form-control" placeholder="岗位需求，每个框只允许填写一个需求" aria-describedby="sizing-addon4"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="add1">+</button>
                        </span>
                    </div>
                </div>
                <div class="col-md-6" id="work">
                    <h2>工作内容</h2>
                    <div class="input-group input-group-md workrow">
                        <span class="input-group-addon">*</span>
                        <input type="text" class="form-control" placeholder="工作内容，每个框只允许填写一个工作内容" aria-describedby="sizing-addon5"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="add2">+</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-12">
                    <button class="btn btn-md btn-color" style="float: right;" id="sure" data-toggle="" data-placement="" title="">确定添加？</button>
                </div>
            </div>
        </div>
        <div class="page_3">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color: #4e372f;color: white;">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseOne">
                            已添加的招聘信息
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table class="table table-striped table-hover table-condensed">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>岗位类别</th>
                                    <th>岗位名称</th>
                                    <th>工作地点</th>
                                    <th>岗位需求</th>
                                    <th>工作内容</th>
                                    <th>薪资待遇</th>
                                    <th>删除</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8">无添加</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-color" style="float: right;" id="createModal" data-toggle="modal" data-target="#myModal">生成模板</button>
    </div>
    <!--The StartLine of the modal-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="clean">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">生成结果</h4>
                </div>
                <div class="modal-body" id="successText">

                </div>
                <div class="modal-footer">
                    <a type="button" class="btn btn-default" href="" id="enter">进入HTML</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--The EndLine of the modal-->

    <footer>
        <div style="text-align:center">
            <a>版权声明</a>©2020 夕阳红老汉信息有限公司 版权所有</a><br>
        </div>
    </footer>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modalDetail.js"></script>
</html>